const path = require('path');
//启用热更新的第二步
const webpack=require('webpack');
//导入在内存中生成HTML页面的插件
//只要是插件，都一定要放到plugins节点中去
//这个插件的两个作用：
//1.自动在内存中根据指定页面生成一个内存的页面
//2.自动把打包好的bundle.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin');
//要使得vue-loader加载的上需要加上这这一行与在插件中配置new VueLoaderPlugin()
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { options } = require('less');

//通过Node模块操作，向外面暴露一个配置对象

module.exports={
    entry:path.join(__dirname,'./src/main.js'),//打包文件
    output:{
        path:path.join(__dirname,'./dist'),//打包好的文件存放地址
        filename:'bundle.js'//打包好文件的文件名
    },
    mode:'development',//设置mode
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象，这是启用热更新的第三步
        new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:'index.html' //指定生成的页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module:{//这个节点用于配置所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            //配置处理.css文件的第三方loader规则
            { test:/\.css$/,use:['style-loader','css-loader'] },//正则表达式可以匹配所有以.css结尾的文件
            //这是配置处理.less文件的第三方loader规则
            { test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            //这是配置处理.sass文件的第三方loader规则
            { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //这是配置样式表中图片的loader规则
            /* 这是因为file-loader默认采用ES模块语法，即import '../image.png'；然而Vue生成的是
               CommonJS模块语法，即require('../image.png')；二者不一致。要么让file-loader或url-loader
               采用CommonJS语法，要么让Vue采用ES语法。
               刚好file-loader或url-loader有一个esModule选项能调整，将其设置为false即可
               第二种解决办法就是降低url-loader或者file-loader版本

               用这些是为了使得图片正常加载
            */
            { test:/\.jpg|png|gif|bmp$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        esModule:false,
                        name:'[hash:6]-[name].[ext]',
                        limit:100000
                    }
                }]
            },
          
            
            //可以使用？给url-loader传递参数，其中有一个固定的参数叫做limit，表示照片的大小，需要给定一个数值；
            //limit给定的这个数值是图片的大小，单位为Byte（字节）
            //如果指定limit参数，则只有图片的大小小于等于给定的值时候，才会转为base64格式的图片，否则就不转换
            //[name].[ext]是指定是什么文件的名字和后缀名，[hash:长度]表示取Hash值的前几位（总长度32）。
            { test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            //添加转换JS文件的loader，其中必须把node_modules目录设置为排除项，这样，在打包的时候，会忽略node_modules目录下所有
            //的JS文件，否则项目运行不起来

            //解析Vue组件的第三方loader
            {test:/\.vue$/,use:'vue-loader'},
            //处理样式中的字体文件路劲的问题
             {test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'}

        ]

    },
    //加载其他的包可以在这里起别名
    resolve:{
       /*  alias:{//别名
            //以vue结尾
            'vue$':'vue/dist/vue.js'
        } */
    }
}
 

//当我们在 控制台 直接输入webpack命令执行的时候，webpack做了以下几步
//1.首先webpack发现，我们并没有通过命令的形式，给它指定入口和出口
//2.webpack就会去项目的更目录中，查找一个叫webpack.config.js的配置文件
//3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
//4.当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建；
//所以直接在控制台上输入webpack就可以将要打包的文件配置成另一个打包好的文件